<template>
  <div class="ZgpersonDialog">
    <a-modal
      :title="title"
      :visible="dialogVisible"
      width="70%"
      :destroy-on-close="true"
      top="15vh"
      @close="close"
      center
      :close-on-click-modal="false"
    >
      <div v-if="init" name="slide-fade">
        <div
          class="custom-tree-container"
          v-loading="treeloading"
          element-loading-text="组织获取中..."
        >
          <!-- 左侧的树 -->
          <div class="flex-tree">
            <a-input
              placeholder="输入关键字进行过滤"
              v-model="treeFilter"
              style="padding: 10px"
              class="input-with-select"
            >
            </a-input>
            <div class="flex-tree-c">
              <a-tree
                class="filter-tree"
                :data="setUserstreeData"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :highlight-current="true"
                ref="tree"
                @node-click="setReviewerNodeClick"
              >
              </a-tree>
            </div>
          </div>
          <!-- 右侧的人员列表-->
          <div class="flex-tree">
            <a-input
              placeholder="输入关键字进行过滤"
              v-model="checkboxFilterText"
              style="padding: 10px"
              @input="inputCheckboxFilterText"
              class="input-with-select"
            />
            <a-button
              style="margin: 0 10px"
              type="primary"
              size="small"
              @click="handleAllCheck"
              v-if="selectType == 'check'"
            >
              全选
            </a-button>
            <a-button
              style="margin: 0 10px 0 0"
              type="danger"
              size="small"
              @click="handleCancelCheck"
              v-if="selectType == 'check'"
            >
              取消全选
            </a-button>
            <div
              class="flex-tree-c flex-tree-1"
              v-loading="personLoading"
              element-loading-text="人员获取中..."
              v-if="selectType == 'check'"
            >
              <a-checkbox-group v-model="checkedUsers" style="padding: 10px">
                <a-checkbox
                  style="display: block; padding: 3px"
                  v-for="item in checkboxUsers"
                  :label="item.userId"
                  :key="item.userId"
                  @change="
                    checkboxChange(item.name, item.userId, item.orgId, $event)
                  "
                >
                  {{ item.name }}
                </a-checkbox>
              </a-checkbox-group>
            </div>
            <div
              class="flex-tree-c flex-tree-1"
              v-loading="personLoading"
              element-loading-text="人员获取中..."
              v-if="selectType == 'radio'">
              <a-radio-group v-model="checkedUsers" style="padding: 10px">
                <a-radio
                  style="display: block; padding: 3px"
                  v-for="item in checkboxUsers"
                  :label="item.userId"
                  :key="item.userId"
                  @change="
                    radioChange(item.name, item.userId, item.orgId, $event)
                  "
                >{{ item.name }}</a-radio
                >
              </a-radio-group>
            </div>
          </div>
        </div>
        <!-- 将选中的人员进行回显-->
        <div class="checked-div">已选择数据</div>
        <div class="child-1">
          <a-tag
            v-for="item in dynamicTags"
            :key="item.userId"
            closable
            type="info"
            @close="handleClose(item)"
            effect="plain"
            style="margin-bottom: 5px"
          >
            {{ item.name }}
          </a-tag>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <a-button type="primary" @click="preserveSetReviewer">
          保 存
        </a-button>
        <a-button @click="cancelSetReviewer"> 取 消 </a-button>
      </span>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    title: {
      type: String,
      default: '组织人员'
    },
    selectType: {
      type: String,
      default: 'check'
    }
  },
  watch: {
    // 搜索过滤，监听input搜索框绑定的treeFilter
    treeFilter (val) {
      this.$refs.tree.filter(val) // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
    }
  },
  data () {
    return {
      dialogVisible: false,
      personLoading: false,
      init: false,
      treeloading: false,
      treeFilter: '',
      setUserstreeData: [],
      dynamicTags: [],
      getCurrentSelectedId: '',
      checkboxFilterText: '', // 设置人员 右侧输入框过滤
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkedUsers: [],
      checkboxUsers: [],
      arrayUser: [],
      arrayTags: [],
      treeFlag: 0
    }
  },
  methods: {
    show (list) {
      this.dynamicTags = []
      this.checkedUsers = []
      this.checkboxUsers = []
      this.arrayUser = []
      this.arrayTags = []
      if (list && list.length > 0) {
        const arr = this.dynamicTags.concat(list)
        // 过滤重复人员
        this.dynamicTags = arr.filter((item, index, self) => {
          // 使用 filter 方法进行筛选，只保留第一个出现的相同 value 的元素
          return self.findIndex((obj) => obj.userId === item.userId) === index
        })
        this.treeFlag = 1
      }
      this.init = true
      this.dialogVisible = true
      this.getOrginTreeData()
    },
    close () {
      this.init = false
      this.dialogVisible = false
    },
    // 设置人员 左侧树  支持过滤
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 设置人员 左侧树 点击树的单位 获取所选单位的id
    setReviewerNodeClick (data) {
      this.personLoading = true
      this.getCurrentSelectedId = data.id
      this.getCheckboxUsers()
    },
    getOrginTreeData () {
      this.treeloading = true
      this.$http.post(
        '/settlement/swan-cloud-settlement/workReminder/getOrginTree',
        {},
        (res) => {
          this.setUserstreeData = res.data
          this.treeloading = false
        }
      )
    },
    getCheckboxUsers () {
      const params = {
        id: this.getCurrentSelectedId
      }
      if (this.checkboxFilterText) {
        params.name = this.checkboxFilterText
      }
      this.$http.post(
        '/settlement/swan-cloud-settlement/workReminder/getUserByOrginId',
        params,
        (res) => {
          this.personLoading = false
          this.checkboxUsers = res.data
          if (this.treeFlag === 1) {
            this.dynamicTags.map((v) => {
              this.arrayTags.push({ userId: v.userId, name: v.name })
              this.arrayUser.push(v.userId)
              return true
            })
            this.checkedUsers = this.arrayUser.filter((item, i, arr) => {
              return arr.indexOf(item) === i
            })
          }
        }
      )
    },
    // 设置人员 点击右侧多选框
    checkboxChange (name, id, orgId, e) {
      if (e) {
        this.dynamicTags.push({ userId: id, name: name, orgId: orgId })
      } else {
        const values = this.dynamicTags.map((item) => item.userId)
        this.dynamicTags.splice(values.indexOf(id), 1)
        this.arrayTags = this.dynamicTags
      }
    },
    radioChange (name, id, orgId, e) {
      if (e) {
        this.dynamicTags = [{ userId: id, name: name, orgId: orgId }]
      } else {
        this.dynamicTags = []
      }
    },
    // 人员全选反选
    handleAllCheck () {
      this.isAllCheck = !this.isAllCheck
      this.checkboxUsers.map((v) => {
        this.arrayTags.push({ userId: v.userId, name: v.name, orgId: v.orgId })
        this.arrayUser.push(v.userId)
        return true
      })
      // 过滤重复人员
      this.checkedUsers = this.arrayUser.filter((item, i, arr) => {
        return arr.indexOf(item) === i
      })
      // 过滤重复人员
      this.dynamicTags = this.arrayTags.filter((item, index, self) => {
        // 使用 filter 方法进行筛选，只保留第一个出现的相同 value 的元素
        return self.findIndex((obj) => obj.userId === item.userId) === index
      })
    },
    // 取消全选
    handleCancelCheck () {
      this.dynamicTags = this.dynamicTags.filter((item) => {
        return !this.checkboxUsers.some((val) => item.userId === val.userId)
      })
      this.arrayTags = this.dynamicTags
      const arrusers = []
      this.checkboxUsers.map((v) => {
        return arrusers.push(v.userId)
      })
      this.checkedUsers = this.checkedUsers.filter(
        (item) => !arrusers.includes(item)
      )
      this.arrayUser = this.checkedUsers
    },
    inputCheckboxFilterText (val) {
      console.log(val)
      // this.bnm()
      this.getCheckboxUsers()
    },
    // 设置人员 展示右侧已选中的用户名称，支持删除
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      // this.$message({ type: 'success', message: '删除成功' })
      const values = JSON.parse(JSON.stringify(this.checkedUsers))
      this.checkedUsers = values.filter((item) => item !== tag.userId)
    },
    preserveSetReviewer () {
      this.dialogVisible = false
      this.$emit('personData', this.dynamicTags)
    },
    cancelSetReviewer () {
      this.dialogVisible = false
      this.init = false
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.flex-tree {
  width: 48%;
  border: 1px solid #dcdfe6;
  height: 370px;
  .flex-tree-c {
    width: 95%;
    height: 300px;
    overflow-y: auto;
    margin: 0 auto;
  }
  .flex-tree-1 {
    height: 270px;
  }
  .input-with-select {
    width: 100%;
    box-sizing: border-box;
  }
}
.checked-div {
  height: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 0 auto;
}
.child-1 {
  width: 100%;
  border: 1px solid #dcdfe6;
  height: 150px;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
}
</style>
